<style lang="less" scoped>
  @import './site-list.less';
</style>
<template>
  <div>
    <Row>
      <Col span="24">
      <Card style="margin-bottom: 10px">
        <Form inline>

          <FormItem style="margin-bottom: 0">
            <Input v-model="searchConf.keywords" placeholder=""></Input>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
          </FormItem>
        </Form>
      </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
      <Card>
        <!--<p slot="title" style="height: 32px">-->
          <!--<Button type="primary" @click="alertAdd" icon="md-add">{{ $t('add_button') }}</Button>-->
        <!--</p>-->
        <div>
          <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
        </div>
        <div class="margin-top-15" style="text-align: center">
          <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                :page-size="tableShow.pageSize" @on-change="changePage"
                @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
        </div>
      </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {getSitesByAdmin, getByAdmin, add, edit, del} from '@/api/site'
  import {getGroups} from '@/api/auth'
  const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.$router.push('/site/site_info/1/'+currentRow.id);
        }
      }
    }, vm.$t('edit_button'))
  }
  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
//          del(currentRow.id).then(response => {
//            vm.tableData.splice(index, 1)
//            vm.$Message.success(response.data.msg)
//          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, vm.$t('delete_button'))
    ])
  }

  export default {
    name: 'system_user',
    components: {
    },
    data () {
      return {
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '用户账号',
            align: 'center',
            key: 'uid',
            minWidth: 120
          },
          {
            title: '站点名',
            align: 'center',
            key: 'name',
            width: 120
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'create_time',
            width: 160
          },
          {
            title: '会员到期时间',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.expiration_time === null ? '' : params.row.expiration_time)
            },
            width: 160
          },
          {
            title: '状态',
            align: 'center',
            width: 100,
            render: (h, params) => {
              let vm = this;
              return h('span', params.row.status === vm.GLOBAL.STATUS_NORMAL ? '正常' : '过期')
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 200,
            render: (h, params) => {
              return h('div', [
                editButton(this, h, params.row, params.index)
//                deleteButton(this, h, params.row, params.index)
              ])
            }
          }
        ],
        tableData: [],
        groupList: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          type: '',
          keywords: '',
          status: ''
        }
      }
    },
    created () {
      this.getList()
    },
    methods: {
      alertAdd () {
        this.$router.push('/site/site_info/1');
      },
      changePage (page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize (size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      search () {
        this.tableShow.currentPage = 1
        this.getList()
      },
      getList () {
        let vm = this
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          keywords: vm.searchConf.keywords,
        }
        getSitesByAdmin(params).then(response => {
          vm.tableData = response.data.data.list
          vm.tableShow.listCount = response.data.data.count
        })
      }
    },
    computed: {
      //用来监听是否需要刷新当前页
      updateList(){
        if (this.$store.getters.siteUpdateList) {
          this.getList();
          this.$store.dispatch('siteUpdateList', false);
        }
        return this.$store.getters.siteUpdateList;
      }
    },
    watch: {
      updateList(val){
      }
    }
  }
</script>
